<?php 
	$cboCountry = 202;
	$cboInterval = 3;
	$cboUnit = "DAY";
	$strSql = "SELECT  City
				     , count(City) AS Registrations
			   FROM tblCustomer 
			   WHERE Country = ".$cboCountry." 
			   		AND RegistrationDate > DATE_SUB(NOW(),INTERVAL ".$cboInterval." ".$cboUnit.")
			   GROUP BY City 
			   ORDER BY Registrations";
	$qryRegistrations = new MySqlResults($strSql);
	if(!$qryRegistrations->result)
	{
		echo $strSql;
		return ;
	}?>

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
  <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geomap']});
   google.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = new google.visualization.DataTable();
      data.addRows(<?=$qryRegistrations->numrows?>);
      data.addColumn('string', 'City');
      data.addColumn('number', 'Registered');<?
		$iRow = 0; 
		do{?>
			data.setValue(<?=$iRow?>, 0, '<?=urlencode($qryRegistrations->myrow['City'])?>');
			data.setValue(<?=$iRow?>, 1, <?=$qryRegistrations->myrow['Registrations']?>);<?
			$iRow ++;
		}while($qryRegistrations->myrow = mysql_fetch_array($qryRegistrations->result));?>
      var options = {};
      options['region'] = 'GB';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';
      options['width'] = '800';
      options['height'] = '500';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };
  
  </script>
  	<div id="header"><h1>Customer Registrations From the last <?=$cboInterval?> <?=$cboInterval>1?strtolower($cboUnit)."s":strtolower($cboUnit)?> Grouped By City</h1></div>
    <div id='map_canvas'></div>